<template>
  <view class="phone-set">
    <custom-navi :show-home="false">{{mTitle}}<view class="putin" @click="upData" v-if="uphide">提交</view></custom-navi>
	<view class="hint" v-if="hide">
		{{hint}}
	</view>
    <view class="phone-set-box" v-if="type==='shopName'">
      <view class="title">店铺名称</view>
      <input
        type="text"
        placeholder="请输入店铺名称"
        @blur="handleInputConfirm"
        :value="showValue"
		@input="handleInput"
      />
    </view>
    <view class="phone-set-box" v-if="type==='phone'">
      <view class="title">电话</view>
      <input
        type="number"
        placeholder="请输入电话号码"
        @blur="handleInputConfirm"
        :value="showValue"
		@input="handleInput"
      />
    </view>
    <view class="phone-set-box" v-if="type==='perCapitaPrice'">
      <view class="title">人均价格</view>
      <input
        type="number"
        placeholder="请输入人均价格"
        @blur="handleInputConfirm"
        :value="showValue"
		@input="handleInput"
      />
    </view>
	<view class="phone-set-circle" v-if="type==='detailAddress'">
	  <view class="title">商圈选择</view>
	  <view class="txt" @click="circleBtn">
		  {{addressCircle}}
		  <image src="/static/little-more.png" mode=""></image>
	  </view>
	</view>
    <view class="phone-set-box" v-if="type==='detailAddress'">
      <view class="title">地址</view>
      <input
        placeholder="请输入地址"
        @blur="handleInputConfirm"
        :value="showValue"
		@input="handleInput"
      ></input>
    </view>
	<!-- 上传图片 -->
		<view class="status-set-upImg">
			<view class="status-set-upImg-head">
				<view>
					上传图片：
				</view>
					<view>
						示例图
					</view>
			</view>
				<view class="status-set-upImg-img">
					<view class="upload">
					  <view
					    v-for="(item,index) in imgList"
					    :key="index"
					    class="upload-child"
					    @tap="handleImgDetailSet(index)"
					  >
					    <image :src="item.url" mode="widthFix" />
					  </view>
					  <view v-if="imgList.length<1" class="addPhoto" @tap="handlerImg"><text class='cuIcon-cameraadd'></text></view>
					</view>
					<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
					<view class="text">
						请按照以上的要求提供举证，否则可能无法深刻
						通过，修改多个内容需要上传相同资质的，只需
						上传一次
					</view>
				</view>
		</view>
		<view class="replenish">
				<view class="replenish-title">
					补充说明：
				</view>
				<view class="replenish-text">
					<textarea value="" maxlength="150" @input="handlePopTxt" placeholder="请提供修改以上信息的原因，帮助工作人员合适，150字以内" class="txt"/>
					<view class="counts">
						{{count}}/150
					</view>
				</view>
		</view>
		<!-- 上传图片 -->
    <!-- <view class="btn">
      <button @tap="handleSubmit">保存</button>
    </view> -->
  </view>
</template>

<script>
import {
  changeInformation,
  submitStoreExamine,
  getExamineResult
} from '../../api'
import CONSTS from '@/src/consts';
import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
export default {
	components: { ImageCropper },
  data () {
    return {
      shopInfo: {},
	  streetData:'',
      showValue: '',
	  addressCircle:'',
	  dztData:'',
	  alike:'',
      type: null,
	  hint:'',
	  hide:false,
	  uphide:true,
	  count:'0',
	  cj: '',
	  content:'',
	  imgList: [],
	  examineType:'',
	  Parameter:{
		  addressRemarks:'',
		  addressVoucher:'',
		  areaCode:'',
		  phoneRemarks:'',
		  phoneVoucher:'',
		  shopAddressDetail:'',
		  shopPhone:'',
		  storeId:'',
		  storeName:'',
		  storeNameRemarks:'',
		  storeNameVoucher:'',
	  }
    }
  },
  computed: {
    mTitle () {
      switch (this.type) {
        case 'shopName':
          return '餐厅名字设置'
          break;
        case 'phone':
          return '餐厅电话设置'
          break;
        case 'perCapitaPrice':
          return '人均价格设置'
          break;
        default:
          return '餐厅地址设置'
      }
    }
  },
  onLoad (option) {


    const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
      }
    });
    this.type = option.type
	console.log(option.type)
	if(option.type=='shopName'){ 
		this.examineType='3'
	}else if(option.type=='phone'){
		this.examineType='1'
	}else if(option.type=='detailAddress'){
		this.examineType='2'
	}
    this.showValue = this.shopInfo[this.type]
	this.alike=this.showValue
    console.log(this.shopInfo[this.type])
	// this.exType()
  },
  onShow() {
	this.exType().then(val => {
		this.streetBtn()
	});
  },
  methods: {
	  streetBtn(){
		const _self = this
		  uni.getStorage({
		    key: 'streetData',
		    success: function (res) {
		      // _self.streetData = res.data
		  	// console.log(res.data)
		  	if(res.data){
		  		_self.addressCircle = res.data.siteName
				_self.dztData = res.data
		  	}
		    }
		  });
	  },
	  circleBtn(){
		  if(this.uphide == true){
			 uni.navigateTo({
			     url: '../circle/index'
			 }); 
		  }
		
	  },
	  //上传图片
	  handlerImg () {
	     const _self = this
	     uni.chooseImage({
	       count: 3, //默认9
	       sizeType: ['original', 'compressed'],
	       sourceType: ['album'],
	       success: function (res) {
	         const tempFilePaths = res.tempFilePaths;
	         uni.uploadFile({
	           url: CONSTS.BASE_URL + '/basic/upload/single/store',
	           // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
	           filePath: tempFilePaths[0],
	           name: 'file',
	           formData: {
	             'user': 'test'
	           },
	           success: (uploadFileRes) => {
	             const res = JSON.parse(uploadFileRes.data)
	   
	             _self.cj = CONSTS.BASE_URL + '/basic' + res.data
	           }
	         });
	       }
	     })
	   },
	   confirm (e) {
	     this.cj = ''
	     const _self = this
	     uni.uploadFile({
	       url: CONSTS.BASE_URL + '/basic/upload/single/store',
	       filePath: e.detail.tempFilePath,
	       name: 'file',
	       formData: {
	         'user': 'test'
	       },
	       success: (uploadFileRes) => {
	         const res = JSON.parse(uploadFileRes.data)
	   
	         const imgMode = {
	           url: CONSTS.BASE_URL + '/basic' + res.data,
	           path: res.data,
	           title: ""
	         }
	         _self.imgList.push(imgMode)
	   	  // console.log(_self.imgList)
	       }
	     });
	   },
	   cancel () {
	     console.log('canceled')
	   },
	   handleImgDetailSet (index) {
	   	const _self = this
	   	uni.chooseImage({
	   	  count: 3, //默认9
	   	  sizeType: ['original', 'compressed'],
	   	  sourceType: ['album'],
	   	  success: function (res) {
	   	    const tempFilePaths = res.tempFilePaths;
	   	    uni.uploadFile({
	   	      url: CONSTS.BASE_URL + '/basic/upload/single/store',
	   	      // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
	   	      filePath: tempFilePaths[0],
	   	      name: 'file',
	   	      formData: {
	   	        'user': 'test'
	   	      },
	   	      success: (uploadFileRes) => {
	   	        const res = JSON.parse(uploadFileRes.data)
	   				
	   	        _self.cj = CONSTS.BASE_URL + '/basic' + res.data
	   			_self.imgList.splice(index,1)
	   			// console.log(_self.imgList)
	   	      }
	   	    });
	   	  }
	   	})
	   	
	   },
	  handlePopTxt(e){
	  	// console.log(e.detail.value)
	  	this.content=e.detail.value
	  	this.count=e.detail.value.length
	  },
	  //
    handleInputConfirm (e) {
   //    console.log(this.shopInfo[this.type])
	  // console.log(e.detail.value)
      this.shopInfo[this.type] = e.detail.value
	  // console.log(this.shopInfo)
	  
    },
	handleInput(e){
		this.alike=e.detail.value
		if(this.examineType==1){
			this.Parameter.shopPhone=e.detail.value
		}else if(this.examineType==2){
			this.Parameter.shopAddressDetail=e.detail.value
		}else if(this.examineType==3){
			this.Parameter.storeName=e.detail.value
		}
		console.log(this.Parameter)
	},
    handleParams (param) {
      let paramsUrl = ''
      // let param = {
      //   id: this.shopInfo.id
      // }
      // param[this.type] = this.shopInfo[this.type]
      for (const item in param) {
        let val = param[item]
        let str = `${item}=${val}&`
        paramsUrl += str
      }
      paramsUrl = paramsUrl.slice(0, paramsUrl.length - 1)
	  console.log(paramsUrl)
      return paramsUrl
    },
	async exType(){
		let params = {
		  examineType:this.examineType,
		  storeId:this.shopInfo.id
		}
		// let url = `/merchant/app/store/getExamineResult?${this.handleParams(param)}`
		try {
		  const {
		    data
		  } = await getExamineResult(params)
				// }= await submitStoreExamine(params)
		  // this.$utils.common.toast.fail('修改成功');
		 console.log(data)
		 if(this.examineType==1){
		 	this.showValue=data.shopPhone
		 }else if(this.examineType==2){
		 	this.showValue=data.shopAddressDetail
			this.addressCircle=data.addressCircle
			
		 }else if(this.examineType==3){
		 	this.showValue=data.storeName
		 }
		 if(data.toExamine==1){
			 this.hint='审核中请留意系统消息'
			 this.hide=true
			 this.uphide=false
		 }else if(data.toExamine==2){
			 // this.hint='审核未通过请重新提交'
			 this.hide=false
			 this.uphide=true
		 }else if(data.toExamine==3){
			 this.hint='审核未通过请重新提交'
			 this.hide=true
		 }else{
			 this.hide=false
		 }
		 
		} catch (err) {
		  console.log(err)
		  if (err.code && err.statusCode) {
		    if (err.code !== 200) {
		      return this.$utils.common.toast.fail(err.data.message);
		    }
		    return this.$utils.common.toast.fail(err.errMsg);
		  }
		}
	},
    async upData () {
    //  let url = `/merchant/app/store/changeInformation?${this.handleParams()}`
      if (this.type === 'phone') {
        const phoneReg = /^1[3-578]\d{9}$/;
        if (!phoneReg.test(this.shopInfo[this.type])) {
          return this.$utils.common.toast.fail('手机号码不合法');
        }
      }
	  // console.log(this.imgList[0])
	 if(this.examineType==1){
	 	this.Parameter.phoneVoucher=this.imgList[0].path
		this.Parameter.phoneRemarks=this.content
		var params ={
			storeId:this.shopInfo.id, // 店铺id
			shopPhone:this.Parameter.shopPhone, // 店铺电话号码
			phoneRemarks:this.Parameter.phoneRemarks, // 电话备注
			phoneVoucher:this.Parameter.phoneVoucher, // 电话凭证
		}
	 }else if(this.examineType==2){
	 	this.Parameter.addressVoucher=this.imgList[0].path
		this.Parameter.addressRemarks=this.content
		var params ={
			storeId:this.shopInfo.id, // 店铺id
			shopAddressDetail:this.Parameter.shopAddressDetail, // 店铺详细地址
			addressRemarks:this.Parameter.addressRemarks, // 地址备注
			addressVoucher:this.Parameter.addressVoucher,// 地址凭证
			areaCode:this.dztData.areaCode ,// 店铺区选择
			streetCode:this.dztData.streetCode // 店铺街道code
		}
	 }else if(this.examineType==3){
	 	this.Parameter.storeNameVoucher=this.imgList[0].path
		this.Parameter.storeNameRemarks=this.content
		var params ={
			storeId:this.shopInfo.id, // 店铺id
			storeName:this.Parameter.storeName, // 店铺名
			storeNameRemarks:this.Parameter.storeNameRemarks, // 店铺名备注
			storeNameVoucher:this.Parameter.storeNameVoucher, // 店铺名凭证
		}
	 }
	 if(this.showValue==this.alike){
		 this.$utils.common.toast.fail("重复修改");
	 }else{
		 try {
		   const {
		     data
		   // } = await changeInformation(url)
		 		}= await submitStoreExamine(params)
		   this.$utils.common.toast.fail('提交成功,等待审核');
		   setTimeout(() => {
		     return this.$utils.common.navigateBack()
		   }, 1000)
		 } catch (err) {
		   console.log(err)
		   if (err.code && err.statusCode) {
		     if (err.code !== 200) {
		       return this.$utils.common.toast.fail(err.data.message);
		     }
		     return this.$utils.common.toast.fail(err.errMsg);
		   }
		 }
	 }
	
      
    }
  },
}
</script>

<style lang="scss" scoped>
.title {
  line-height: 38rpx;
  white-space: nowrap;
}
.hint{
	width: 100%;
	height: 66rpx;
	text-align: center;
	line-height: 66rpx;
	background-color: #FFF7D6;
	color: #F5311D;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}
input,
textarea {
  text-align: right;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(153, 153, 153, 1);
}

.phone-set {
  border-bottom: 1rpx solid rgba(230, 230, 230, 1);
  // background-color: #ffffff;
.putin{
	  position: absolute;
	  top: 0;
	  right: 32rpx;
	  font-size:30rpx;
	  font-family:PingFang SC;
	  font-weight:500;
	  color:rgba(255,255,255,1);
	  opacity:1;
	  line-height: 44rpx;
  }
  .btn {
    position: fixed;
    bottom: 116rpx;
    width: 100vw;
    display: flex;
    justify-content: center;

    button {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      width: 686rpx;
      height: 88rpx;
      background: rgba(12, 212, 211, 1);
      opacity: 1;
      border-radius: 10rpx;
    }
  }

  &-box {
    display: flex;
    justify-content: space-between;

    padding: 30rpx 32rpx;
	background-color: #ffffff;
    input {
      text-align: right;
    }
  }
  &-circle{
	display: flex;
	justify-content: space-between;
	padding: 30rpx 32rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid rgba(230, 230, 230, 1);
	.txt{
		margin-left: auto;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(80,80,80,1);
		opacity:1;
		image{
			width:14rpx;
			height:20rpx;
			opacity:1;
			margin-left: 20rpx;
		}
	}
  }
}
.status-set-upImg{
	  width: 100%;
	  margin-top: 20rpx;
	  padding: 32rpx;
	  background-color: #ffffff;
	&-head{
		display: flex;
		align-items: center;
		view{
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(80,80,80,1);
			opacity:1;
		}
		view:last-child{
			margin-left: auto;
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(12,212,211,1);
			opacity:1;
		}
	}
	&-img{
		display: flex;
		.text{
			padding:32rpx 30rpx 0 0;
			width:504rpx;
			height:92rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:30rpx;
			color:rgba(179,179,179,1);
			opacity:1;
		}
		.upload {
		  padding: 32rpx 30rpx 0 30rpx;
		  display: flex;
		  flex-wrap: wrap;
		  background-color: #ffffff;
		  margin-bottom: 20rpx;
		  &-child {
		    position: relative;
		    margin: 2rpx;
			width: 132rpx;
			height: 132rpx;
			margin-right: 10rpx;
			overflow: hidden;
		    image {
		      width: 132rpx;
			  height: 132rpx;
		    }
		    &-title {
		      position: absolute;
		      bottom: 6rpx;
		      width: 100%;
		      padding: 24rpx;
		      padding-bottom: 18rpx;
		      color: #ffffff;
		      text-overflow: ellipsis;
		      overflow: hidden;
		      background: linear-gradient(
		        180deg,
		        rgba(113, 113, 113, 0) 0%,
		        rgba(0, 0, 0, 0.33) 33%,
		        rgba(3, 3, 3, 1) 100%
		      );
		    }
		  }
		  .addPhoto {
		    margin: 2rpx;
		    width: 132rpx;
		    height: 132rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background: rgba(242, 242, 242, 1);
		    border: 1rpx solid rgba(230, 230, 230, 1);
		    font-size: 106rpx;
			overflow: hidden;
			text{
				font-size:52rpx
			}
		  }
		}
		
	}
  }
  .replenish{
  	  width: 100%;
  	  margin-top: 20rpx;
  	  background-color: #ffffff;
  	  padding: 32rpx;
  	  &-title{
  		  font-size:32rpx;
  		  font-family:PingFang SC;
  		  font-weight:bold;
  		  color:rgba(80,80,80,1);
  		  opacity:1;
  	  }
  	  &-text{
  		  height: 200rpx;
  		  margin-top: 20rpx;
  		  position: relative;
  		  .txt{
  		  	width: 680rpx;
  		  	height: 160rpx;
  		  	font-size:28rpx;
  		  	font-family:PingFang SC;
  		  	font-weight:400;
  		  	// color:rgba(179,179,179,1);
  		  	opacity:1;
  		  }
  		  .counts{
  		  	position: absolute;
  		  	right: 0rpx;
  		  	bottom: 10rpx;
  		  	font-size:28rpx;
  		  	font-family:PingFang SC;
  		  	font-weight:400;
  		  	color:rgba(153,153,153,1);
  		  	opacity:1;
  		  }
  	  }
  }
</style>
